<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>生意帮</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
    <style>
        html,
        body {
            background-color: transparent;
        }

        .boxB {
            position: relative;
            ;
            width: 100%;
            height: 100vh;
        }

        .mask {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
        }

        .box {
            background-color: #fff;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
        }

        .aui-content {}

        .head_right .aui-pull-right {
            border: 1px solid #999;
            border-radius: 50%;
            height: 1rem;
            width: 1rem;
            text-align: center;
            line-height: 1rem;
        }

        .aui-iconfont {
            font-size: 0.6rem;
            vertical-align: top;
        }

        .head_right {
            position: relative;
        }

        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }

        #app .aui-list-header {
            background: #fff;
        }

        .aui-list-header i {
            font-style: normal;
            font-size: 1rem;
        }

        .box {
            padding: 0 0 4rem 0;
        }

        .box .inp_list {
            text-align: center;
            background-size: 100% 0;
              padding: 2rem 0;
            font-size: 0;
            position: relative;
        }
          .inp_list div {
            width: 2rem;
            height: 2rem;
            margin: 0 0.3rem;
            display: inline-block;
            line-height: 2rem;
            text-align: center;
            border: 1px solid #ccc;
            font-size: 1.2rem;
            font-weight: bold;
            color: #333;
            position: relative;
        }

        .inp_list .active:after {
            position: absolute;
            content: '*';
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            line-height: 2rem;
            /*border-radius: 50%;*/
            font-size: 1.2rem;
            /*background-color: #333;*/
        }

          .inp_list {
            overflow: hidden;
          }
          .inp_list input {
          position: absolute;
          top: -100%;
          left: 0;
          width: 100%;
          height: 100%;
          font-size: 12px;
          background: skyblue;
          opacity: 0.1;
           -webkit-opacity: 0.1;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="boxB">
          <div class="mask" onclick="openF()"></div>
            <div class="box">
                <div class="aui-content">
                    <ul class="aui-list aui-media-list">
                        <li class="aui-list-header">
                            请输入支付密码 <i onclick="openF()">×</i>
                        </li>
                        <li class="inp_list" @click="focusInp()">
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                            <input type="number" id="inp" v-model='password'>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/aui-slide.js"></script>
<script type="text/javascript" src="../../script/aui-lazyload.js"></script>
<script type="text/javascript">
    function openF() {
        api.closeFrame();
    }

    apiready = function() {
        var app = new Vue({
            el: '#app',
            data: {
                curId: 1,
                password: ''
            },
            created: function() {
                var $_this = this;

            },
            methods: {
              focusInp: function () {
                $('#inp').focus()
              }
            },
            mounted: function() {},
            watch: {
              password:function() {
                var $_this = this
                // $('.inp_list div').eq($_this.password.length - 1).addClass('active')
                $('.inp_list div').each(function(i) {
                  if(i < $_this.password.length) {
                    $('.inp_list div').eq(i).addClass('active')
                  }else {
                    $('.inp_list div').eq(i).removeClass('active')
                  }
                })
                if($_this.password.length >= 6) {
                  $('#inp').blur()
                  if (api.pageParam.type == 'getPW') {
                    api.sendEvent({
                        name: 'sendPW',
                        extra: {
                            password: Base64.encode('UNO' + $_this.password + 'HACHA'),
                        }
                    })
                    api.closeFrame();
                  } else {
                    api.ajax({
                        url: window.Url.Freeorder_confirmOrder,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('token'),
                                orderId: api.pageParam.id,
                                password: Base64.encode('UNO' + $_this.password + 'HACHA')
                            }
                        },
                        timeout: 300,
                    }, function(ret, err) {
                        if (ret) {
                          if (ret.re == 1) {
                          api.execScript({
                              name: 'orderAll',
                              script: 'window.location.reload()'
                          })
                          api.execScript({
                              name: 'orderAll',
                              frameName:'3',
                              script: 'window.location.reload()'

                          })
                            api.closeFrame();
                          } else {
                            $_this.password = ''
                            api.toast({ msg: ret.info,duration: 2000,location:'middle' });
                          }
                        } else {
                            api.alert({ msg: JSON.stringify(err) });
                        }
                    })
                  }

                }
              }
            }
        })
    }
</script>

</html>
